<template>
    <div>
         <h3>显示数据</h3>
         <div>
            姓名:
            <input type="text" v-model="info.UserName">
            角色:
            <select v-model="info.Jid">
                <option value="">请选择</option>
                <option :value="item.Id" v-for="item in err">{{ item.JsName }}</option>
            </select>
            <input type="button" value="显示" @click="showall">
            <input type="button" value="导出" @click="daochu">
            <input type="button" value="批量启用"  @click="plqy(true)">
            <input type="button" value="批量禁用"  @click="plqy(false)">
            <input type="button" value="新增"  @click="xinzeng">
         </div>
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td><input type='checkbox' v-model="checked" @change="checkedall"></td>
                    <td>员工编号</td>
                    <td>姓名</td>
                    <td>角色</td>
                    <td>手机号码</td>
                    <td>备注</td>
                    <td>更新人</td>
                    <td>更新时间</td>
                    <td>状态</td>
                    <td>操作</td>
                </tr>
                <tr v-for="item in data.list" :key="item.Id">
                    <td><input type='checkbox' v-model="ids" :value="item.Id" @change="checkedOne"></td>
                    <td>{{ item.UserCode }}</td>
                    <td>{{ item.UserName }}</td>
                    <td>{{ item.JsName }}</td>
                    <td>{{ item.Userphone }}</td>
                    <td>{{ item.Userbz }}</td>
                    <td>{{ item.Gxname }}</td>
                    <td>{{ moment(item.GxTime).format('YYYY-MM-DD') }}</td>
                    <td>{{ item.Stares==true?"启用":"禁用" }}</td>
                    <td><input type="button" value="删除" @click="shanchu(item.Id)"></td>
                </tr>
            </tbody>
        </table>
        <div>
            <span>共{{ data.tolatCount }}条</span>
            <span>每页{{ info.pageSize }}</span>
            <span>共{{ info.pageIndex }}/{{ data.tolatPage }}页</span>

            <input type="button" value="首页" @click="fan(1)">
            <input type="button" value="上一页" @click="fan(info.pageIndex-1)">
            <input type="button" :value="item" v-for="item in data.tolatPage" @click="fan(item)">
            <input type="button" value="下一页" @click="fan(info.pageIndex+1)">
            <input type="button" value="尾页" @click="fan(data.tolatPage)">
            <select v-model="info.pageSize"  @change="showall">
                <option :value="item" v-for="item in res">每页{{ item }}条</option>
            </select>
        </div>
    </div>
</template>

<script setup lang="ts">
import {ref,reactive,onMounted}from 'vue'
import axios from 'axios';
import moment from 'moment';
import{useRoute,useRouter}from 'vue-router'
import IconDocumentation from '@/components/icons/IconDocumentation.vue';
const route=useRoute();
const router=useRouter();
let info:any=reactive({
    pageIndex:1,
    pageSize:10,
    UserName:'',
    Jid:''
})
let data:any=reactive({
    list:[],
    tolatCount:'',
    tolatPage:''
})
//翻页

let res:any=reactive([2,4,6])
const fan=(num:any)=>{
    if(num<1){
        info.pageIndex=1;
        return;
    }
    if(data.tolatPage<num){
        info.pageIndex=data.tolatPage;
        return;
    }
    info.pageIndex=num;
    showall();
}
//全选反选
let checked:any=ref(false);
let ids:any=ref([]);
const checkedall=()=>{
    if(checked.value){
        ids.value=data.list.map((item:any)=>{
            return item.Id
        })
    }
    else
    {
        ids.value=[]
    }
}
const checkedOne=()=>{
    if(ids.value.length==data.list.length){
        checked.value=true;
    }
    else
    {
        checked.value=false;
    }
}
onMounted(()=>{
    showall();
    bangding();
})
//绑定下拉框
let err:any=ref([])
const bangding=()=>{
    axios({
        url:'/api/User/Bingjs',
        method:'get'
    })
    .then((res)=>{
        err.value=res.data
    })
}
//显示
const showall=()=>{
    axios({
        url:'/api/User/UserList',
        method:'get',
        params:info
    })
    .then((res)=>{
        Object.assign(data,res.data);
    })
}
//删除
const shanchu=(Id:any)=>{
    var f=confirm("确认删除吗?")
    if((f)){
        axios({
            url:'/api/User/Updatasc',
            method:'put',
            params:{
                id:Id
            }
        })
        .then((res)=>{
            if(res.data!=0){
                alert("删除成功");
                showall();
            }
            else
            {
                alert("删除失败");
                return;
            }
        })
    }
}
//批量修改状态
const plqy=(selst:any)=>{
    var f=confirm("确认修改吗?")
    if((f)){
        axios({
            url:'/api/User/Plupdatestart',
            method:'put',
            params:{
                ids:ids.value.tostring(),
                selst:selst
            }
        })
        .then((res)=>{
            if(res.data!=0){
                alert("修改成功");
                showall();
            }
            else
            {
                alert("修改失败");
                return;
            }
        })
    }
}
//导出
const daochu=()=>{
    location.href="https://localhost:7089/api/User/Exec?pageIndex=1&pageSize=2"
}
//新增
const xinzeng=()=>{
    router.push({
        path:'/userAdd',
        
    })
}
</script>

<style scoped>

</style>